import * as chitu from "maishu-chitu";

// import { } from 'js-xlsx'
import 'js-xlsx';
import React = require('react');
import ReactDOM = require('react-dom');
import { ShoppingService } from "services/shopping";
import { AccountService } from "services/account";
import * as wuzhui from "maishu-wuzhui";
import { FormValidator, rules } from "maishu-dilu";
import * as ui from "maishu-ui-toolkit";
import { CSSProperties } from "react";
import { guid } from "maishu-chitu-service";
import { dataSources } from "services/dataSources";
import { createGridView } from "maishu-wuzhui-helper";

export default function (page: chitu.Page) {

    let shopping = page.createService(ShoppingService);
    let account = page.createService(AccountService);
    var dataSource = new wuzhui.DataSource({
        select: (args) => shopping.orders(args)
    });

    /**
     * 订单发货窗口
     */
    class OrderSendDialog extends React.Component<{} & React.Props<OrderSendDialog>,
        { order: Order, shipInfo?: ShipInfo }>{
        private element: HTMLElement;
        private expressBillNoInput: HTMLInputElement;
        private expressCompanyInput: HTMLInputElement;
        private validator: FormValidator;
        constructor(props) {
            super(props);
            this.state = { order: null };
        }
        show(order: Order, shipInfo?: ShipInfo) {
            // this.state.shipInfo = shipInfo || {} as any;
            // this.state.order = order;
            // this.setState(this.state);
            this.setState({
                shipInfo: shipInfo || {} as ShipInfo,
                order: order
            })
            ui.showDialog(this.element);
        }
        hide() {
            ui.hideDialog(this.element);
        }
        componentDidMount() {
            let { required } = rules;
            this.validator = new FormValidator(page.element,
                { name: "expressBillNo", rules: [required("请输入快递单号")] },
                { name: "expressCompany", rules: [required("请输入快递公民名称")] }
            )
        }
        async save() {
            let isValid = await this.validator.check();
            if (!isValid) {
                return Promise.reject('validate fail');
            }
            let shop = page.createService(ShoppingService);
            let { order, shipInfo } = this.state;
            let result = await shop.deliverOrder(order, shipInfo);
            dataSource.updated.fire(dataSource, order);
            this.hide();
            return result;
        }
        render() {
            let { order, shipInfo } = this.state;
            if (order == null) {
                return null;
            }
            let orderStatus = order ? order.Status : null;
            return [
                <div key={10} className="modal fade" ref={(e: HTMLElement) => this.element = e || this.element}>
                    <div className="modal-dialog">
                        <div className="modal-content">
                            <div className="modal-header">
                                <button type="button" className="close" data-dismiss="modal">
                                    <span aria-hidden="true">&times;</span>
                                    <span className="sr-only">Close</span>
                                </button>
                                <h4 className="modal-title">发货信息</h4>
                            </div>
                            <div className="modal-body form-horizontal">
                                <input name="orderId" type="hidden" />
                                <div className="form-group">
                                    <label className="col-sm-2 control-label">订单时间</label>
                                    <div className="col-sm-10">
                                        <input name="createDateTime" type="text" className="form-control" readOnly={true}
                                            value={order.OrderDate.toLocaleString() || ''} />
                                    </div>
                                </div>
                                <div className="form-group">
                                    <label className="col-sm-2 control-label">付款人</label>
                                    <div className="col-sm-10">
                                        <input name="consignee" type="text" className="form-control" readOnly={true}
                                            value={order.MemberName || ""} />
                                    </div>
                                </div>
                                <div className="form-group">
                                    <label className="col-sm-2 control-label">收货地址</label>
                                    <div className="col-sm-10">
                                        <input name="receiptAddress" type="text" className="form-control" readOnly={true}
                                            value={order.ReceiptAddress || ""} />
                                    </div>
                                </div>
                                <div className="form-group">
                                    <label className="col-sm-2 control-label">快递单号</label>
                                    <div className="col-sm-10">
                                        <input name="expressBillNo" type="text" className="form-control"
                                            value={shipInfo.ExpressBillNo || ""}
                                            readOnly={orderStatus == "Send"}
                                            ref={(e: HTMLInputElement) => this.expressBillNoInput = e || this.expressBillNoInput}
                                            onChange={(e) => {
                                                shipInfo.ExpressBillNo = (e.target as HTMLInputElement).value;
                                                this.setState(this.state);
                                            }}
                                        />
                                    </div>
                                </div>
                                <div className="form-group">
                                    <label className="col-sm-2 control-label">快递公司</label>
                                    <div className="col-sm-10">
                                        <input name="expressCompany" type="text" className="form-control"
                                            value={shipInfo.ExpressCompany || ""}
                                            readOnly={orderStatus == "Send"}
                                            ref={(e: HTMLInputElement) => this.expressCompanyInput = e || this.expressCompanyInput}
                                            onChange={(e) => {
                                                shipInfo.ExpressCompany = (e.target as HTMLInputElement).value;
                                                this.setState(this.state);
                                            }}
                                        />
                                    </div>
                                </div>
                            </div>

                            <div className="modal-footer">
                                <button type="button" className="btn btn-default" data-dismiss="modal">取消</button>
                                <button type="submit" className="btn btn-primary" disabled={orderStatus == "Send"}
                                    ref={(e: HTMLButtonElement) => {
                                        if (!e) return;
                                        ui.buttonOnClick(e, () => {
                                            return this.save();
                                        }, { toast: '保存成功' })
                                    }}
                                >保存</button>
                            </div>
                        </div>
                    </div>
                </div>,

            ];
        }
    }

    interface OrderDetailDialogState {
        order: Order,
        isEdit: boolean,
    }
    class OrderDetailDialog extends React.Component<any, OrderDetailDialogState> {
        private element: HTMLElement;
        private dialog: ReceivablesDialog;
        private static defaultOrder = {
            OrderDate: new Date(),
            Consignee: '',
            ReceiptAddress: '',
            Invoice: '',
            Remark: '',
            OrderDetails: [],
            Freight: 0,
            Amount: 0,
            Sum: 0
        } as Order;

        constructor(props) {
            super(props);

            this.state = { order: OrderDetailDialog.defaultOrder, isEdit: false };
            dataSource.updated.add((sender, order) => {
                // this.state.order = order;
                // this.setState(this.state);
                this.setState({ order })
            })
        }
        async show(order: Order) {
            // this.state.order = order;
            // this.setState(this.state);
            this.setState({ order })
            ui.showDialog(this.element);
        }
        hide() {
            ui.hideDialog(this.element);
        }
        showReceiveDialog() {
            // this.dialog.state.order = this.state.order;
            // this.dialog.setState(this.dialog.state);
            this.dialog.setState({ order: this.state.order })

            this.dialog.show();
        }
        modify() {
            // this.state.isEdit = true;
            // this.setState(this.state);
            this.setState({ isEdit: true })
        }
        cancelEdit() {
            // this.state.isEdit = false;
            // this.setState(this.state);
            this.setState({ isEdit: false })
        }
        bindInputField<T>(obj: T, field: string, style?: CSSProperties) {
            let valueText: string;

            valueText = obj[field] as any
            if (this.state.isEdit == false) {
                return <span>{valueText}</span>
            }

            if (style)
                style.border = 'solid 1px #ccc';

            return <input name={field} style={style}
                ref={(e: HTMLInputElement) => e ? e.value = `${valueText}` : null} />
        }
        async save() {
            let { order } = this.state;
            order = JSON.parse(JSON.stringify(order));
            order.OrderDate = new Date(Date.parse(order.OrderDate as any as string));
            order.Freight = Number.parseFloat((this.element.querySelector('[name="Freight"]') as HTMLInputElement).value);
            for (let i = 0; i < order.OrderDetails.length; i++) {
                let row = this.element.querySelector(`[id='${order.OrderDetails[i].Id}']`) as HTMLTableRowElement;
                let priceText = (row.querySelector('[name="Price"]') as HTMLInputElement).value;
                let quantityText = (row.querySelector('[name="Quantity"]') as HTMLInputElement).value;
                order.OrderDetails[i].Price = Number.parseFloat(priceText);
                order.OrderDetails[i].Quantity = Number.parseInt(quantityText);
            }

            let o = await shopping.updateOrder(order);
            Object.assign(this.state.order, o);
            dataSource.updated.fire(dataSource, this.state.order);
            // this.state.isEdit = false;
            // this.setState(this.state);
            this.setState({ isEdit: false })
        }

        render() {
            let order = this.state.order;
            let isEdit = this.state.isEdit;
            return [
                <div key={10} className="modal fade" style={{ display: 'none' }}
                    ref={(e: HTMLElement) => this.element = e || this.element}>
                    <div className="modal-dialog">
                        <div className="modal-content">
                            <div className="modal-header">
                                <button type="button" className="close" data-dismiss="modal">
                                    <span aria-hidden="true">&times;</span>
                                    <span className="sr-only">Close</span>
                                </button>
                                <h4 className="modal-title">订单信息</h4>
                            </div>
                            <div className="modal-body">
                                <table className="table table-striped table-bordered" style={{ textAlign: 'left' }}>
                                    <tbody>
                                        <tr>
                                            <td className="fieldHeader" style={{ width: 80 }}>订单日期</td>
                                            <td style={{ width: 180 }} data-bind="text: OrderDate">{order.OrderDate.toLocaleDateString()}</td>
                                            <td style={{ width: 80 }}>付款人</td>
                                            <td>
                                                {order.MemberName}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>发票信息</td>
                                            <td colSpan={3}>
                                                {order.Invoice}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>备注信息</td>
                                            <td colSpan={3} >{order.Remark}</td>
                                        </tr>
                                        <tr>
                                            <td>收货地址</td>
                                            <td colSpan={3}>
                                                {order.ReceiptAddress}
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <table className="table table-striped table-bordered table-hover">
                                    <thead>
                                        <tr>
                                            <th>名称</th>
                                            <th>价格</th>
                                            <th style={{ width: 60 }}>数量</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {order.OrderDetails.filter(o => o != null).map(orderDetail =>
                                            <tr key={orderDetail.Id} id={orderDetail.Id}>
                                                <td data-bind="text: ProductName">{orderDetail.ProductName}</td>
                                                <td style={{ textAlign: 'right' }}>
                                                    ¥ {this.bindInputField(orderDetail, 'Price', { width: `40px`, textAlign: 'right' })}
                                                </td>
                                                <td style={{ textAlign: 'right' }}>
                                                    {this.bindInputField(orderDetail, 'Quantity', { width: `40px`, textAlign: 'right' })}
                                                </td>

                                            </tr>
                                        )}
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <td colSpan={3} style={{ textAlign: 'right', fontWeight: 'bold' }}>
                                                <div style={{ float: 'left' }}>
                                                    邮费：¥{this.bindInputField(order, 'Freight', { width: 40 })}
                                                </div>
                                                <div style={{ float: 'right' }}>
                                                    {`小计：¥${order.Amount.toFixed(2)}`}
                                                </div>
                                                <div className="clearfix"></div>
                                                <div style={{ textAlign: 'right' }}>
                                                    {`合计：¥${order.Sum.toFixed(2)}`}
                                                </div>
                                            </td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                            <div className="modal-footer">
                                {order.Status == 'WaitingForPayment' ? [
                                    isEdit ? <button key="btn-cancel" className="btn btn-default"
                                        onClick={() => this.cancelEdit()}>取消</button> : null,
                                    isEdit ?
                                        <button key="btn-save" className="btn btn-primary"
                                            ref={(e: HTMLButtonElement) => {
                                                if (!e) return;
                                                ui.buttonOnClick(e, () => {
                                                    return this.save();
                                                })
                                            }}
                                        >保存订单</button> : null,
                                    !isEdit ? <button key="btn-modify" type="button" className="btn btn-primary"
                                        onClick={() => this.modify()}>修改订单</button> : null,
                                    <button key="btn-receive" type="button" className="btn btn-primary" onClick={() => this.showReceiveDialog()}>
                                        确认收款
                                        </button>
                                ] : null}
                            </div>
                        </div>

                    </div>
                </div >,
                order ? <ReceivablesDialog key={20} ref={(e) => this.dialog = e} /> : null
            ];
        }
    }

    interface ReceivablesDialogState {
        order: Order, paymentType: 'WeiXin' | 'Alipay',
        accounts: ReceivementAccount[]
    }

    /**
     * 订单收款窗口
     */
    class ReceivablesDialog extends React.Component<React.Props<ReceivablesDialog>, ReceivablesDialogState>{

        accountElement: HTMLSelectElement;
        actualPayElement: HTMLInputElement;
        shouldPayElement: HTMLInputElement;
        validator: FormValidator;
        private element: HTMLElement;
        private acutalAmount: number;
        private receivementId: string;

        constructor(props) {
            super(props);
            this.state = { order: null, paymentType: 'WeiXin', accounts: [] };
        }
        private async receive() {
            let isValid = await this.validator.check();
            if (!isValid) {
                return Promise.reject('validate fail');
            }
            let order = this.state.order;
            console.assert(order != null);
            let amount = Number.parseFloat(this.actualPayElement.value);
            let paymentType = this.state.paymentType;
            let receivement: Receivement = {
                Id: this.receivementId,
                Amount: amount,
                AccountId: this.accountElement.value
            }
            let result = await account.createReceivement(order.Id, amount, this.accountElement.value)//order.CustomerId, , amount

            order.Status = 'Paid';
            dataSource.updated.fire(dataSource, order);

            // .then(() => {
            //     if (this.props.paid)
            //         this.props.paid(order);

            this.hide();
            // });
            return result;
        }
        async show() {
            this.receivementId = guid();
            this.validator.clearErrors();
            let result = await dataSources.account.select()
            let accounts = Array.isArray(result) ? account : result.dataItems
            this.setState({ accounts } as ReceivablesDialogState)
            ui.showDialog(this.element);
        }
        hide() {
            ui.hideDialog(this.element);
        }
        componentDidMount() {
            this.validator = new FormValidator(this.element,
                { name: 'accountId', rules: [rules.required('请选择账户')] }
            )
        }
        render() {
            let order = this.state.order || { Sum: 0 } as Order;
            let { paymentType, accounts } = this.state;
            return (
                <div className="modal fade" ref={(e: HTMLElement) => this.element = e || this.element}>
                    <div className="modal-dialog">
                        <div className="modal-content">
                            <div className="modal-header">
                                <button type="button" className="close" data-dismiss="modal">
                                    <span aria-hidden="true">&times;</span>
                                    <span className="sr-only">Close</span>
                                </button>
                                <h4 className="modal-title">订单收款</h4>
                            </div>
                            <form className="modal-body">
                                <div className="form-group row">
                                    <div className="col-xs-2">
                                        应收款
                                    </div>
                                    <div className="col-xs-10">
                                        <div className="input-group">
                                            <div className="input-group-addon">¥</div>
                                            <input name="shouldPay" type="text" className="form-control" value={order.Sum as any} readOnly={true}
                                                ref={(e: HTMLInputElement) => this.shouldPayElement = e || this.shouldPayElement} />
                                        </div>
                                    </div>
                                </div>
                                <div className="form-group row">
                                    <div className="col-xs-2">
                                        实收款
                                    </div>
                                    <div className="col-xs-10">
                                        <input name="actualPay" type="text" className="form-control" value={order.Sum as any} readOnly={true}
                                            ref={(e: HTMLInputElement) => this.actualPayElement = e || this.actualPayElement} />
                                    </div>
                                </div>
                                <div className="form-group row">
                                    <div className="col-xs-2">
                                        收款账户
                                    </div>
                                    <div className="col-xs-10">
                                        <select name="accountId" className="form-control"
                                            ref={(e: HTMLSelectElement) => this.accountElement = e || this.accountElement}>
                                            <option value="">请选择收款账户</option>
                                            {accounts.map(o =>
                                                <option key={o.Id} value={o.Id}>{o.Name}</option>
                                            )}
                                        </select>
                                    </div>
                                </div>
                                {/* <div className="from-group row">
                                    <div className="col-xs-10 col-xs-offset-2">
                                        <label className="radio-inline">
                                            <input name="paymentType" type="radio" checked={paymentType == 'WeiXin'}
                                                onChange={() => {
                                                    this.state.paymentType = 'WeiXin';
                                                    this.setState(this.state);
                                                }} />
                                            微信收款
                                        </label>
                                        <label className="radio-inline">
                                            <input name="paymentType" type="radio" checked={paymentType == 'Alipay'}
                                                onChange={() => {
                                                    this.state.paymentType = 'Alipay';
                                                    this.setState(this.state);
                                                }} />
                                            支付宝收款
                                        </label>
                                    </div>
                                </div> */}
                            </form>
                            <div className="modal-footer">
                                <button type="button" className="btn btn-default" data-dismiss="modal">
                                    取消
                                </button>
                                <button type="button" className="btn btn-primary"
                                    ref={(e: HTMLButtonElement) => e ? ui.buttonOnClick(e, () => this.receive(), { toast: "收款成功" }) : null}>
                                    确定
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            );
        }
    }

    class OrderListPage extends React.Component<{},
        { current_status: string }>{
        orderSendDialog: OrderSendDialog;
        orderDetailDialog: OrderDetailDialog;
        receivablesDialog: ReceivablesDialog;

        private ordersTable: HTMLTableElement;
        gridView: wuzhui.GridView<Order>;

        constructor(props) {
            super(props);
            this.state = { current_status: "" }
        }
        activeTab(status: string) {
            if (this.state.current_status == status)
                return;

            if (status) {
                this.gridView.selectArguments.filter = `Status = "${status}"`;
            }
            else {
                this.gridView.selectArguments.filter = null;
            }
            // this.state.current_status = status;
            this.gridView.selectArguments.startRowIndex = 0;
            // this.setState(this.state);
            this.setState({ current_status: status })
            dataSource.select(this.gridView.selectArguments);
            // renderTabs(status)
        }
        async exportData() {
            // const XLSX = window['XLSX'];
            let selectResult = await dataSource.select();
            let arr = selectResult.dataItems;//Array.isArray(selectResult) ? selectResult :
            let data = arr.map(o => [o.Serial, o.MemberName, o.ReceiptAddress, o.StatusText, o.Sum, o.OrderDate]);
            data.unshift(['订单号', '付款人', '收货地址', '状态', '金额', '订单日期']);
            const ws = XLSX.utils.aoa_to_sheet(data);
            const wb = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(wb, ws, "SheetJS");
            /* generate XLSX file and send to client */
            XLSX.writeFile(wb, "sheetjs.xlsx")
        }
        showOrderDetailDialog(order: Order) {
            this.orderDetailDialog.show(order);
        }
        async showSendDialog(order: Order) {
            let shipInfo = order.Status == 'Send' ? await shopping.shipInfo(order.Id) : null

            this.orderSendDialog.show(order, shipInfo);
        }
        createCommandCell(dataItem: Order) {
            let self = this;
            let cell = new wuzhui.GridViewDataCell({
                dataField: 'Status',
                render(dataItem: Order) {
                    ReactDOM.render([
                        <button key="toSend" className={dataItem.Status == 'Send' ? "btn btn-minier" : "btn btn-success btn-minier"}
                            ref={(e: HTMLButtonElement) => e ? e.onclick = ui.buttonOnClick(() => self.showSendDialog(dataItem)) : null}>
                            <i className="icon-truck"></i>
                            <span>{dataItem.Status == 'Send' ? '已发货' : '待发货'}</span>
                        </button>,
                        <button key="detail" className="btn btn-info btn-minier" style={{ marginLeft: 4 }}
                            ref={(e: HTMLButtonElement) => {
                                if (!e) return;
                                e.onclick = (e) => self.showOrderDetailDialog(dataItem);
                            }}>
                            <i className="icon-cog"></i>
                            <span>详细</span>
                        </button>
                    ], cell.element)
                }
            });
            return cell;
        }
        createStatusCell(dataItem: Order) {
            let self = this;
            let cell = new wuzhui.GridViewDataCell({
                dataField: 'Status',
                render(dataItem: Order) {
                    ReactDOM.render(
                        dataItem.Status == 'WaitingForPayment' ?
                            <button className="btn btn-purple btn-minier"
                                onClick={() => {
                                    // self.receivablesDialog.state.order = dataItem;
                                    // self.receivablesDialog.setState(self.receivablesDialog.state);
                                    self.receivablesDialog.setState({ order: dataItem })
                                    self.receivablesDialog.show();
                                }}>{ShoppingService.orderStatusText(dataItem.Status)}</button> :
                            <span>{ShoppingService.orderStatusText(dataItem.Status)}</span>,
                        cell.element);
                }
            });
            return cell;
        }
        componentDidMount() {

            this.gridView = createGridView({
                element: this.ordersTable,
                dataSource,
                columns: [
                    new wuzhui.BoundField({
                        dataField: 'OrderDate', headerText: '订单日期', dataFormatString: '{G}',
                        headerStyle: { width: '100px' } as CSSStyleDeclaration,
                        sortExpression: 'OrderDate'
                    }),
                    new wuzhui.BoundField({
                        dataField: 'Serial', headerText: '订单号', sortExpression: 'Serial',
                        headerStyle: { width: '120px' } as CSSStyleDeclaration
                    }),
                    new wuzhui.BoundField({
                        dataField: 'MemberName', headerText: '付款人',
                        headerStyle: { width: '100px' } as CSSStyleDeclaration
                    }),
                    new wuzhui.BoundField({
                        dataField: 'ReceiptAddress', headerText: '收货地址'
                    }),
                    new wuzhui.CustomField({
                        headerText: '状态',//dataField: 'StatusText',
                        itemStyle: { textAlign: 'center', width: '80px' } as CSSStyleDeclaration,
                        createItemCell: (order: Order) => this.createStatusCell(order)
                    }),
                    new wuzhui.BoundField({
                        dataField: 'Sum', headerText: '金额', dataFormatString: '￥{C2}',
                        itemStyle: { textAlign: 'right' } as CSSStyleDeclaration
                    }),
                    new wuzhui.CustomField({
                        createItemCell: (order: Order) => this.createCommandCell(order),
                        headerText: '操作',
                        headerStyle: { width: '140px' } as CSSStyleDeclaration,
                        itemStyle: { textAlign: 'center' } as CSSStyleDeclaration,
                    })
                ],
                pageSize: 10
            });
        }
        render() {
            let status = this.state.current_status;
            return [
                <ul key="tabs" id="myTab" className="nav nav-tabs">
                    <li className={!status ? "active" : ""}
                        onClick={() => this.activeTab('')}>
                        <a>全部</a>
                    </li>
                    <li className={status == 'WaitingForPayment' ? 'active' : ''}
                        onClick={() => this.activeTab('WaitingForPayment')} >
                        <a>待付款</a>
                    </li>
                    <li className={status == 'Canceled' ? 'active' : ''}
                        onClick={() => this.activeTab('Canceled')}>
                        <a>已取消</a>
                    </li>
                    <li className={status == 'Paid' ? 'active' : ''}
                        onClick={() => this.activeTab('Paid')}>
                        <a>已付款</a>
                    </li>
                    {/* <li className={status == 'WaitingForSend' ? 'active' : ''}
                        onClick={() => this.activeTab('WaitingForSend')}>
                        <a href="javascript:">待发货</a>
                    </li> */}
                    <li className={status == 'Send' ? 'active' : ''}
                        onClick={() => this.activeTab('Send')}>
                        <a>已发货</a>
                    </li>
                    <li className={status == 'Received' ? 'active' : ''}
                        onClick={() => this.activeTab('Received')}>
                        <a>已收货</a>
                    </li>
                    <li className="pull-right">
                        <button onClick={() => this.exportData()} className="btn btn-sm btn-primary" data-toggle="dropdown">
                            <i className="icon-download-alt" />
                            <span>导出发货单</span>
                        </button>
                        <div className="form-horizontal" style={{ display: 'none' }} data-role="export">
                            <div className="form-group">
                                <label className="col-sm-3 control-label">开始时间</label>
                                <div className="col-sm-9">
                                    <input data-bind="value: beginDate" name="begin" className="form-control" type="text" placeholder="填写订单的下单日期" />
                                </div>
                            </div>
                            <div className="form-group">
                                <label className="col-sm-3 control-label">结束时间</label>
                                <div className="col-sm-9">
                                    <input data-bind="value: endDate" name="end" className="form-control" type="text" placeholder="填写订单的下单日期" />
                                </div>
                            </div>
                            <div className="form-group">
                                <div className="col-sm-12">
                                    <a data-bind="attr: { href: exportUrl }" className="btn btn-sm btn-primary btn-block">确定</a>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li className="pull-right">
                        <button data-bind="click: search" className="btn btn-primary btn-sm">
                            <i className="icon-search" />
                            <span>搜索</span>
                        </button>
                    </li>
                    <li className="pull-right">
                        <input type="text" data-bind="value: searchText" className="form-control" style={{ width: 300 }} placeholder="请输入系统订单号或微信订单号或付款人" />
                    </li>
                </ul>,
                <table key="orders" ref={(e: HTMLTableElement) => this.ordersTable = e || this.ordersTable}>
                </table>,
                <OrderSendDialog key="orderSend" ref={(e) => this.orderSendDialog = e || this.orderSendDialog} />,
                <OrderDetailDialog key="orderDetail" ref={(e) => this.orderDetailDialog = e || this.orderDetailDialog} />,
                <ReceivablesDialog key="receivablesDialog" ref={(e) => this.receivablesDialog = e || this.receivablesDialog} />
            ];
        }
    }

    ReactDOM.render(<OrderListPage />, page.element);



}



